<template>
  <div class="center-nox">
    <div v-if="emptyShow">
      <div class="nav" v-if="stationData.kxIncline != null">
        <div>杆塔倾斜</div>
        <div class="nav-t">
          <p>{{ stationData.kxIncline.timeStamp }}</p>
        </div>
      </div>
      <el-row :gutter="10" v-if="stationData.kxIncline != null" class="m-t">
        <el-col :span="8">
          <div class="nrxx cursor_pointer"
               @click="inclineHandle('inclination','mm/m','倾斜度',stationData.kxIncline.timeStamp)">
            <p>倾斜度</p>
            <p><span class="sum">{{ stationData.kxIncline.inclination }}</span>mm/m</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="nrxx cursor_pointer"
               @click="inclineHandle('inclinationX','mm/m','顺线倾斜度',stationData.kxIncline.timeStamp)">
            <p>顺线倾斜度</p>
            <p><span class="sum">{{ stationData.kxIncline.inclinationX }}</span>mm/m</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="nrxx cursor_pointer"
               @click="inclineHandle('inclinationY','mm/m','横线倾斜度',stationData.kxIncline.timeStamp)">
            <p>横线倾斜度</p>
            <p><span class="sum">{{ stationData.kxIncline.inclinationY }}</span>mm/m</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="nrxx cursor_pointer"
               @click="inclineHandle('angleX','°','顺线倾斜角',stationData.kxIncline.timeStamp)">
            <p>顺线倾斜角</p>
            <p><span class="sum">{{ stationData.kxIncline.angleX }}</span>°</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="nrxx cursor_pointer"
               @click="inclineHandle('angleY','°','横线倾斜角',stationData.kxIncline.timeStamp)">
            <p>横线倾斜角</p>
            <p><span class="sum">{{ stationData.kxIncline.angleY }}</span>°</p>
          </div>
        </el-col>
      </el-row>

      <div class="nav" v-if="stationData.kxMeteorology != null">
        <div>气象监测</div>
        <div class="nav-t">
          <p>{{ stationData.kxMeteorology.timeStamp }}</p>
        </div>
      </div>
      <el-row :gutter="10" v-if="stationData.kxMeteorology != null" class="m-t">
        <el-col :span="8">
          <div class="nrxx cursor_pointer"
               @click="MeteorologyHandle('averageWindSpeed10min','m/s','平均风速',stationData.kxMeteorology.timeStamp)">
            <p>平均风速</p>
            <p><span class="sum">{{ stationData.kxMeteorology.averageWindSpeed10min }}</span>m/s</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="nrxx cursor_pointer"
               @click="MeteorologyHandle('averageWindDirection10min','°','平均风向',stationData.kxMeteorology.timeStamp)">
            <p>平均风向</p>
            <p><span class="sum">{{ stationData.kxMeteorology.averageWindDirection10min }}</span>°</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="nrxx cursor_pointer"
               @click="MeteorologyHandle('maxWindSpeed','m/s','最大风速1',stationData.kxMeteorology.timeStamp)">
            <p>最大风速</p>
            <p><span class="sum">{{ stationData.kxMeteorology.maxWindSpeed }}</span>m/s</p>
          </div>
        </el-col>
<!--        <el-col :span="8">-->
<!--          <div class="nrxx cursor_pointer"-->
<!--               @click="inclineHandle('extremeWindSpeed','m/s','极大风速',stationData.kxMeteorology.timeStamp)">-->
<!--            <p>极大风速</p>-->
<!--            <p><span class="sum">{{ stationData.kxMeteorology.extremeWindSpeed }}</span>m/s</p>-->
<!--          </div>-->
<!--        </el-col>-->
        <el-col :span="8">
          <div class="nrxx cursor_pointer"
               @click="MeteorologyHandle('standardWindSpeed','m/s','标准风速',stationData.kxMeteorology.timeStamp)">
            <p>标准风速</p>
            <p><span class="sum">{{ stationData.kxMeteorology.standardWindSpeed }}</span>m/s</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="nrxx cursor_pointer"
               @click="MeteorologyHandle('airTemperature','℃','气温',stationData.kxMeteorology.timeStamp)">
            <p>气温</p>
            <p><span class="sum">{{ stationData.kxMeteorology.airTemperature }}</span>℃</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="nrxx cursor_pointer"
               @click="MeteorologyHandle('humidity','%RH','湿度',stationData.kxMeteorology.timeStamp)">
            <p>湿度</p>
            <p><span class="sum">{{ stationData.kxMeteorology.humidity }}</span>%RH</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="nrxx cursor_pointer"
               @click="MeteorologyHandle('airPressure','hPa','气压',stationData.kxMeteorology.timeStamp)">
            <p>气压</p>
            <p><span class="sum">{{ stationData.kxMeteorology.airPressure }}</span>hPa</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="nrxx cursor_pointer"
               @click="MeteorologyHandle('precipitation','mm','降雨量',stationData.kxMeteorology.timeStamp)">
            <p>降雨量</p>
            <p><span class="sum">{{ stationData.kxMeteorology.precipitation }}</span>mm</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="nrxx cursor_pointer"
               @click="MeteorologyHandle('precipitationIntensity','mm/min','雨强',stationData.kxMeteorology.timeStamp)">
            <p>雨强</p>
            <p><span class="sum">{{ stationData.kxMeteorology.precipitationIntensity }}</span>mm/min</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="nrxx cursor_pointer"
               @click="MeteorologyHandle('radiationIntensity','W/㎡','光辐射强度',stationData.kxMeteorology.timeStamp)">
            <p>光辐射强度</p>
            <p><span class="sum">{{ stationData.kxMeteorology.radiationIntensity }}</span>W/㎡</p>
          </div>
        </el-col>
      </el-row>

      <!--      <div class="nav">-->
      <!--        <div>工作状态</div>-->
      <!--        <div class="nav-t">-->
      <!--          <p>{{ stationData.kxWorkStatus.timeStamp }}</p>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <el-row :gutter="10" v-if="stationData.kxWorkStatus != null">-->
      <!--        <el-col :span="8">-->
      <!--          <div class="nrxx">-->
      <!--            <p>电源电压</p>-->
      <!--            <p><span class="sum">{{ stationData.kxWorkStatus.batteryVoltage }}</span>V</p>-->
      <!--          </div>-->
      <!--        </el-col>-->
      <!--        <el-col :span="8">-->
      <!--          <div class="nrxx">-->
      <!--            <p>工作温度</p>-->
      <!--            <p><span class="sum">{{ stationData.kxWorkStatus.operationTemperature }}</span>℃</p>-->
      <!--          </div>-->
      <!--        </el-col>-->
      <!--        <el-col :span="8">-->
      <!--          <div class="nrxx">-->
      <!--            <p>电池电量</p>-->
      <!--            <p><span class="sum">{{ stationData.kxWorkStatus.batteryCapacity }}</span>%</p>-->
      <!--          </div>-->
      <!--        </el-col>-->
      <!--        <el-col :span="8">-->
      <!--          <div class="nrxx">-->
      <!--            <p>浮充状态</p>-->
      <!--            <p><span class="sum">{{ getDictLabel("floating_charge", stationData.kxWorkStatus.floatingCharge) }}</span>-->
      <!--            </p>-->
      <!--          </div>-->
      <!--        </el-col>-->
      <!--        <el-col :span="8">-->
      <!--          <div class="nrxx">-->
      <!--            <p>工作总时间</p>-->
      <!--            <p><span class="sum">{{ stationData.kxWorkStatus.totalWorkingTime }}</span>H</p>-->
      <!--          </div>-->
      <!--        </el-col>-->
      <!--        <el-col :span="8">-->
      <!--          <div class="nrxx">-->
      <!--            <p>连续工作时间</p>-->
      <!--            <p><span class="sum">{{ stationData.kxWorkStatus.workingTime }}</span>H</p>-->
      <!--          </div>-->
      <!--        </el-col>-->
      <!--        <el-col :span="8">-->
      <!--          <div class="nrxx">-->
      <!--            <p>网络连接状态</p>-->
      <!--            <p><span class="sum">{{ getDictLabel("connection_State", stationData.kxWorkStatus.connectionState) }}</span>-->
      <!--            </p>-->
      <!--          </div>-->
      <!--        </el-col>-->
      <!--      </el-row>-->


      <div v-if="stationData.kxMetalTempSensors.length > 0">
      <div class="nav">
        <div>N塔-金具测温</div>
        <!--        <div>金具测温</div>-->
        <div class="nav-t">
          <p>{{ stationData.kxMetalTempSensors[0].timeStamp }}</p>
        </div>
      </div>
      <!--      <el-table :data="stationData.kxMetalTempSensors.slice(0,12)" border :row-style="{padding:'1px'}"-->
      <!--                :cell-style="{padding:'1px'}"-->
      <!--                style="width: 100%;font-size: 12px">-->
      <!--        <el-table-column prop="alermFlag" label="标识" header-align="center" align="center" width="89">-->
      <!--          <template v-slot="scope">-->
      <!--            <span v-if="scope.row.alermFlag.includes('采集成功')" class="sum">{{ scope.row.alermFlag }}</span>-->
      <!--            <span v-else-if="scope.row.alermFlag.includes('采集失败')" class="sum-danger">{{-->
      <!--                scope.row.alermFlag-->
      <!--              }}</span>-->
      <!--            <span v-else class="sum-warning">{{ scope.row.alermFlag }}</span>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--      </el-table>-->

      <el-table :data="stationData.kxMetalTempSensors.slice(0,12)" border :row-style="{padding:'1px'}"
                :cell-style="{padding:'1px'}"
                style="width: 100%;font-size: 12px" class="m-t">
        <!--        <el-table-column prop="componentId" label="传感器" header-align="center" align="center"></el-table-column>-->
        <el-table-column prop="locationSimp" label="位置" header-align="center" align="center"></el-table-column>
        <el-table-column prop="alermFlag" label="标识" header-align="center" align="center" width="89">
          <template v-slot="scope">
            <!--            <span :class="{sumdanger : scope.row.alermFlag.includes('采集失败')}">{{ scope.row.alermFlag }}</span>-->
          </template>
        </el-table-column>
        <el-table-column prop="temperature" label="温度" header-align="center" align="center" width="67">
          <template v-slot="scope">
            <span class="cursor_pointer"
                  @click="kxMetalTempSensorsHandle('temperature','℃',`N塔-金具测温-${scope.row.componentId}`,scope.row.componentId,scope.row.timeStamp,scope.row.cmdId)">{{
                scope.row.temperature
              }}℃</span>
          </template>
        </el-table-column>
        <!--        <el-table-column prop="batteryVoltage" label="电压" header-align="center" align="center">-->
        <!--          <template v-slot="scope">-->
        <!--            <span>{{ scope.row.batteryVoltage }}</span>V-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>

      <div class="nav">
        <div>T塔-金具测温</div>
        <div class="nav-t">
          <p>{{ stationData.kxMetalTempSensors[0].timeStamp }}</p>
        </div>
      </div>
      <el-table :data="stationData.kxMetalTempSensors.slice(12)" border :row-style="{padding:'1px'}"
                :cell-style="{padding:'1px'}"
                style="width: 100%;font-size: 12px">
        <!--        <el-table-column prop="componentId" label="传感器" header-align="center" align="center"></el-table-column>-->
        <el-table-column prop="locationSimp" label="位置" header-align="center" align="center"></el-table-column>
        <el-table-column prop="alermFlag" label="标识" header-align="center" align="center"
                         width="89"></el-table-column>
        <el-table-column prop="temperature" label="温度" header-align="center" align="center" width="67">
          <template v-slot="scope">
            <span class="cursor_pointer"
                  @click="kxMetalTempSensorsHandle('temperature','℃',`T塔-金具测温-${scope.row.componentId}`,scope.row.componentId,scope.row.timeStamp,scope.row.cmdId)">{{
                scope.row.temperature
              }}℃</span>
          </template>
        </el-table-column>
      </el-table>
      </div>
    </div>
  </div>

  <KxMeteorologystatistics ref="kxMeteorologystatistics" :stationId="id"></KxMeteorologystatistics>
  <KxinclineStatistics ref="KxinclineStatistics" :stationId="id"></KxinclineStatistics>
  <KxMetalTempSensorsStatistics ref="kxmetaltempsensorsstatistics" :stationId="id"></KxMetalTempSensorsStatistics>
</template>

<script>
import useView from "@/hooks/useView";
import {defineComponent, reactive, toRefs} from "vue";
import baseService from "@/service/baseService";
import {tableRowClassName} from "@/utils/tableRowClassName";
import KxinclineStatistics from "@/views/sensorData/curveStatistics/kxinclineStatistics.vue";
import KxMetalTempSensorsStatistics from "@/views/sensorData/curveStatistics/kxMetalTempSensorsStatistics.vue";
import KxMeteorologystatistics from "@/views/sensorData/curveStatistics/kxMeteorologyStatistics.vue";



export default defineComponent({
  components: {KxMetalTempSensorsStatistics, KxinclineStatistics,KxMeteorologystatistics},
  setup() {
    const state = reactive({
      tableRowClassName,
      clientHeight: document.body.clientHeight,
      isleftboxShow: true,
      drawer: false,
      dialogTitle: "",
      stationData: {
        kxIncline: {},
        kxMeteorology: {},
        kxWorkStatus: {},
        kxMetalTempSensors: []
      },
      id: "",
      emptyShow: false,
      historyviews: "",
      thermometryTitle: []
    });
    return {...useView(state), ...toRefs(state)};
  },
  methods: {

    MeteorologyHandle(type, unit, title, timeStamp) {
      this.$refs.kxMeteorologystatistics.init(type, unit, title, timeStamp);
    },

    inclineHandle(type, unit, title, timeStamp) {
      this.$refs.KxinclineStatistics.init(type, unit, title, timeStamp);
    },
    kxMetalTempSensorsHandle(type, unit, title, componentId, timeStamp, cmdId) {
      this.$refs.kxmetaltempsensorsstatistics.init(type, unit, title, componentId, timeStamp, cmdId);
    },
    extractSubstring(str) {
      const index = str.indexOf('_');
      if (index === -1) {
        return '';
      }
      const beforeUnderscore = str.slice(0, index);
      const afterUnderscore = str.slice(index + 1, index + 1 + beforeUnderscore.length);
      return [beforeUnderscore, afterUnderscore];
    },
    switcSrawer(state, title) {
      this.drawer = true;
      this.dialogTitle = title;
      this.historyviews = state;
    },
    playVideo(data) {
      if (data.type === "station") {
        // console.log(this.extractSubstring(data.name));
        this.thermometryTitle = this.extractSubstring(data.name);
        this.id = data.id;
        this.getSensorsById();
      }
    },
    getSensorsById() {
      this.stationData = {};
      this.emptyShow = false;
      baseService.get(`/KxStation/kxstation/getSensorsById?id=${this.id}`).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.stationData = res.data;
        // this.stationData.kxMeteorology == null ? {} : this.stationData.kxMeteorology;
        // if (this.stationData.kxIncline == null) {
        //   this.stationData.kxIncline = {};
        // }
        // if (this.stationData.kxMeteorology == null) {
        //   this.stationData.kxMeteorology = {};
        // }
        if (this.stationData.kxMetalTempSensors == null) {
          this.stationData.kxMetalTempSensors = [];
        }
        this.emptyShow = true;
      });
    }
  }
})
</script>
<style lang="scss" scoped>
.el-table {
  background-image: url("@/views/sensorData/imgs/bjk.png");
  background-size: 100% 100%;
  --el-table-tr-bg-color: transparent !important;
}
</style>

<style lang="scss" scoped>
.m-t {
  margin-bottom: 8px;
}

.nav {
  height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px 0 20px;
  background-image: linear-gradient(to left, rgba(29, 66, 112, 00), rgba(29, 66, 112, 0.76));

  .nav-t {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
  }
}

.sumdanger {
  font-size: 16px;
  color: red;
  //background: linear-gradient(0deg, #c90505 0%, #FFFFFF 100%);
  //-webkit-background-clip: text;
  //-webkit-text-fill-color: transparent;
}

.sum-warning {
  font-size: 16px;
  color: #cc9200;
  //background: linear-gradient(0deg, #cc9200 0%, #FFFFFF 100%);
  //-webkit-background-clip: text;
  //-webkit-text-fill-color: transparent;
}

.content {
  height: 100%;
  width: 300px;
  overflow: auto;
  transition: width ease-in 0.2s;
}

.control {
  height: 120px;
  width: 22px;
  cursor: pointer;
  text-align: center;

  img {
    width: 100%;
    height: 100%;
  }
}

.center-nox {
  color: #FFFFFF;
  overflow: auto;
  height: 100%;
  overflow-x: hidden;
  padding: 10px;

  .title-col {
    padding: 20px 0;
    font-size: 14px;
  }

  img {
    width: 14px;
    height: 14px;
  }

  .title {
    font-weight: bold;
  }

  .uptime {
    padding: 0 10px;
  }

  .tiele-right {
    display: flex;
    align-items: center;
    justify-content: right;

    span {
      cursor: pointer;
    }
  }

  .nrxx-cgq {
    background-image: url("@/views/sensorData/imgs/bjk.png");
    background-size: 100% 100%;
    font-weight: 400;
    font-size: 12px;
    vertical-align: top;
    padding: 10px 20px;
    margin-bottom: 10px;

    .title-box {
      display: flex;
      justify-content: space-between;
    }

    .cgq-box {
      p {
        text-align: center;
      }
    }

    .sum {
      font-size: 16px;
      color: #FFFFFF;
      background: linear-gradient(0deg, #00C4FF 0%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .nrxx-jinju {
    background-image: none !important;
    height: 46px !important;
  }

  .nrxx {
    text-align: center;
    background-image: url("@/views/sensorData/imgs/bjk.png");
    background-size: 100% 100%;
    font-weight: 400;
    font-size: 10px;
    vertical-align: top;
    //padding: 1px;
    overflow: hidden;

    .sum {
      font-size: 12px;
      color: #FFFFFF;
      background: linear-gradient(0deg, #00C4FF 0%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}

</style>
